متد prepend در jQuery
در این بخش از آموزش JQuery ، متد prepend را شرح میدهیم.
متد prepend مطالب را در آغاز عناصر انتخاب شده درج میکند.
شکل کلی استفاده از متد prepend به شرح زیر است :
$(selector).prepend(content,function(index,html))
مثال زیر کاربرد متد prepend را نشان میدهد:
$("button").click(function(){
$("p").prepend("<b>Prepended text</b>");
});
متد prependTo در jQuery
در این بخش از آموزش JQuery ، متد prependTo را شرح میدهیم.
متد prependTo ، می تواند عنصر HTML تعیین شده برای آن را به ابتدای یک عنصر دیگر HTML اضافه نماید .
برای
مثال فرض کنید که یک تگ div و یک پاراگراف ( تگ div ) دارید . می خواهید
کدی طراحی نمایید تا در هنگام کلیک کاربر بر روی یک دکمه فرمان ، عنصر
پاراگراف به انتدای تگ div اضافه شود . برای این منظور باید از متد prependTo استفاده نمایید .
شکل کلی استفاده از متد prependTo به شرح زیر است :
$ ( content ).prependTo ( selector ) ;
این پارامتر تعیین کننده عنصر HTML ای
است که می خواهید آن را به ابتدای عنصر مورد نظر خود اضافه نمایید . ( این
پارامتر باشد از نوع تگ های HTML باشد ).
استفاده از این پارامتر اجباری است .
content
: اگر عنصر HTML ای که می خواهید آن را در ابتدای عنصر دیگر وارد نمایید ،
از قبل در صفحه وجود داشته باشد ، در هنگام اضافه شدن از مکان خود به
ابتدای عنصر مورد نظر منتقل می شود .
selector : این پارامتر تعیین کننده id عنصری است که می خواهید عنصر مورد نظر خود را به ابتدای آن اضافه نمایید .
استفاده از این پارامتر اجباری است .
مثال زیر کاربرد متد prependTo را نشان میدهد:
$("button").click(function(){
$("<span>www.pars-soft.ir</span>").prependTo("p");
});
متد outerWidth در jQuery
در این بخش از آموزش JQuery ، متد outerWidth را شرح میدهیم.
متد outerWidth عرض بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند.
ساختار این متد به صورت زیر است :
$(selector).outerWidth(includeMargin)
مثال زیر کاربرد متد outerWidth را نشان میدهد:
$("button").click(function(){
alert($("div").outerWidth());
});
تصویر زیر نیز کاربرد این متد را نشان میدهد.
متد position در jQuery
در این بخش از آموزش JQuery ، متد position را شرح میدهیم.
متد position ، مختصات محل قرار گیری یک عنصر را بر حسب عنصر مادر ( parent ) آن تعیین کرده و به صفحه بر می گرداند .
این تابع متد position مختصات
عنصر مورد نظر را با دو مقدار عددی نمایش می دهد که یکی تعیین کننده میزان
فاصله از بالای عنصر مادر ( parent ) است است که به آن top می گویند . عدد
دوم تعیین کننده میزان فاصله از سمت چپ عنصر مادر ( parent ) است که به آن
left می گویند .
واحد خروجی این مثال بر حسب پیکسل px می باشد .
شکل کلی استفاده از متد ( ) position به شرح زیر است :
$ ( " selector " ).position ( ) ;
selector : این پارامتر تعیین کننده id عنصری است که می خواهید مختصات آن را نمایش دهید .
مثال زیر کاربرد متد position را نشان میدهد:
$("button").click(function(){
x=$("p").position();
alert("Top: " + x.top + " Left: " + x.left);
});
متد offsetParent در jQuery
در این بخش از آموزش JQuery ، متد offsetParent را شرح میدهیم.
متد offsetParent ،موقعیت عنصر انتخاب شده را نسبت به والدین (Parent) خود نمایش میدهد.
ساختار این متد به صورت زیر است :
$(selector).offsetParent()
مثال زیر کاربرد متد offsetParent را نشان میدهد
$("button").click(function(){
$("p").offsetParent().css("background-color","red");
});
متد outerHeight در jQuery
در این بخش از آموزش JQuery ، متد outerHeight را شرح میدهیم.
متد outerHeight ارتفاع بیرونی اولین عنصر انتخاب شده در HTML را برمیگرداند.
ساختار این متد به صورت زیر است :
$(selector).outerHeight(includeMargin)
متد offset در jQuery
در این بخش از آموزش JQuery ، متد offset را شرح میدهیم.
متد offset ،برای عنصر HTML تعیین شده مختصات آفست را نسبت به سند تنظیم میکند.
ساختار این متد در حالت set به صورت زیر است :
مختصات آفست را تنظیم میکند.
$(selector).offset({top:value,left:value})
متد insertBefore در jQuery
در این بخش از آموزش JQuery ، متد insertBefore را شرح میدهیم.
متد insertBefore ، یک متن یا کنترل HTML را قبل از عنصر مورد نظرتان در صفحه وارد می نماید .
در متد insertBefore بایستی یک متن یا عنصر HTML را انتخاب کرده و سپس تعیین نمایید تا قبل از چه عنصری در صفحه وارد شود .
برای
مثال فرض کنید یک پاراگراف در صفحه دارید و می خواهید کدی طراحی نمایید تا
در صورت کلیک کاربر بر روی یک دکمه فرمان ، متن جدیدی به ابتدای پاراگراف
اضافه شود .
شکل کلی استفاده از متد ( ) insertBefore به شرح زیر است :
$ ( content ).insertBefore ( " selector " ) ;
متد ( ) insertAfter در jQuery
در این بخش از آموزش JQuery ، متد insertAfter را شرح میدهیم.
متد insertAfter ، یک متن یا کنترل HTML را بعد از عنصر مورد نظرتان در صفحه وارد می نماید .
در متد insertAfter بایستی یک متن یا عنصر HTML را انتخاب کرده و سپس تعیین نمایید تا پس از چه عنصری در صفحه وارد شود .
برای
مثال فرض کنید یک پاراگراف در صفحه دارید و می خواهید کدی طراحی نمایید تا
در صورت کلیک کاربر بر روی یک دکمه فرمان ، متن جدیدی به انتهای پاراگراف
اضافه شود .
متد scrollLeft در jQuery
در این بخش از آموزش JQuery ، متد scrollLeft را شرح میدهیم.
متد scrollLeft ،برای عنصر HTML تعیین شده اسکرول افقی تنظیم میکند .
ساختار این متد در حالت set به صورت زیر است :
اسکرول را به حالت افقی تنظیم میکند.
$(selector).scrollLeft(position)
ساختار این متد در حالت Return به صورت زیر است :
موقعیت افقی اسکرول زا برمیگرداند.
متد replaceWith در jQuery
در این بخش از آموزش JQuery ، متد replaceWith را شرح میدهیم.
متد replaceWith ، عنصر HTML تعیین شده را با محتوای جدید جایگزین میکند.
ساختار این متد به صورت زیر است :
$(selector).replaceWith(content,function(index))
مثال زیر کاربرد متد replaceWith را نشان میدهد :
$("button").click(function(){
$("p:first").replaceWith("Hello world!");
});
متد innerWidth در jQuery
در این بخش از آموزش JQuery ، متد innerWidth را شرح میدهیم.
متد innerWidth عرض عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند.
مثال :
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
متد innerHeight در jQuery
در این بخش از آموزش JQuery ، متد innerHeight را شرح میدهیم.
متد innerHeight ارتفاع عناصر را با در نظر گرفتن مقدار padding انها بر می گرداند.
مثال :
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
متد replaceAll در jQuery
در این بخش از آموزش JQuery ، متد replaceAll را شرح میدهیم.
متد replaceAll ، عنصر HTML تعیین شده برای آن را با تمام عناصر HTML مورد نظر شما در صفحه ، عوض می کند .
فرض
کنید در یک صفحه چندین پاراگراف ( تگ < p > ) دارید . می خواهید کدی
طراحی نمایید تا در هنگام اجرای آن ، تمامی پاراگراف های صفحه یا مثلا
پاراگراف های عضو یک کلاس خاص ، با یک تگ span عوض شوند . در این حالت باید از متد replaceAll استفاده نمایید .
ساختار این متد به صورت زیر است :
content : این پارامتر تعیین کننده عنصر HTML یا متنی است که می خواهید آن را به جای عنصر HTML مورد نظرتان در صفحه قرار دهید .$ ( content ).replaceAll ( selector ) ;
متد ( ) height در jQuery
در این بخش از آموزش JQuery ، متد height را شرح میدهیم.
متد height در jQuery , می تواند مقدار ارتفاع یک عنصر HTML را خوانده و بر گرداند و یا به وسیله آن مقدار ارتفاع عنصر را به یک مقدار دلخواه تغییر دهید .
برای مثال اگر یک عنصر div داشته باشیم که ارتفاع آن px 300 باشد ، با استفاده از متد ( ) height می توان دو کار را انجام داد :
مقدار ارتفاع آن را که px 300 است ، به صفحه برگدانیم .
مقدار جدیدی را برای ارتفاع عنصر تعیین کرده و آن را به مقدار جدید تغییر دهید .
نکته : همانطور که در تصویر زیر نمایش داده ایم ، متد height شامل
حاشیه بیرونی ( margin ) ، حاشیه درونی ( padding ) و خطوط حاشیه عنصر (
border ) نمی شود و فقط ارتفاع خود عنصر را بر می گرداند .
متد ( ) html در jQuery
در این بخش از آموزش JQuery ، متد html را شرح میدهیم.
متد html در jQuery دو کار را انجام می دهد :
برای مثال می توانید محتویات یک پاراگراف در صفحه را به مقدار دلخواه خود تغییر دهید .
استفاده از متد html در حالت اول :
شما می توانید به وسیله این متد ، محتویات درونی یک عنصر را بخوانید . شکل کلی استفاده از متد html در حالت اول به شرح زیر است :
$ ( " selector " ).html ( ) ;
selector : این پارامتر تعیین کننده ID عنصری است که می خواهید محتویات درونی آن را بخوانید .
متد hasClass در jQuery
در این بخش از آموزش JQuery ، متد hasClass را شرح میدهیم.
متد hasClass مشخص میکند که آیا عنصر دارای کلاس classname هست یا خیر .
ساختار این متد به صورت زیر است :
$(selector).hasClass(classname)
مثال زیر کاربرد متد hasClass را نشان میدهد :
$("button").click(function(){
alert($("p").hasClass("intro"));
});
متد ( ) detach در jQuery
در این بخش از آموزش JQuery ، متد detach را شرح میدهیم.
متد detach عنصر
HTML تعیین شده برای آن ( شامل تمام متن و اشیای فرزند ) را از روی صفحه
پاک می کند . اما اطلاعات و رویدادهای شی مورد نظر بر روی صفحه باقی می
مانند .
متد detach همچنین یک کپی از عنصر پاک شده را در خود نگه داشته و بعدا می توانید آن عنصر را مجددا به صفحه وارد نمایید .
برای مثال فرض کنید یک پاراگراف یا عکس را بر روی صفحه دارید . به وسیله این متد می توانید آن را از روی صفحه بردارید .
شکل کلی استفاده از متد detach به شرح زیر است :
$ ( " selector " ).detach ( ) ;
متد ( ) empty در jQuery
در این بخش از آموزش JQuery ، متد empty را شرح میدهیم.
متد empty ، محتویات متنی و سایر اشیای فرزند عنصر HTML تعیین شده برای آن را پاک می کند .
نکته مهم درباره متد empty اینست
که این متد خود عنصر و یا خواص آن را حذف نمی کند ، بلکه فقط محتویات
درونی آن را خالی می کند . بنابراین عنصر همچنان بر روی صفحه قرار داشته و
قابل دسترس است .
برای مثال می توانید به وسیله متد ( ) empty ، محتویات درون یک پاراگراف یا آیتم های موجود در یک لیست HTML را پاک نمایید و
شکل کلی استفاده از متد empty به شرح زیر است :
$ ( " selector " ).empty ( ) ;
selector : این پارامتر تعیین کننده id عنصر HTML ی است که می خواهید محتویات درون آن را پاک کنید .
مثال زیر کاربرد متد empty را نشان میدهد :
$("button").click(function(){
$("div").empty();
});
متد ( ) before در jQuery
در این بخش از آموزش JQuery ، متد before را شرح میدهیم.
از متد before در jQuery برای وارد نمودن یک متن یا پاراگراف در سطر قبلی یک پاراگراف استفاده می شود .
متد before متن مورد نظر شما را به سطر قبلی پاراگراف تعیین شده در صفحه ، اضافه می کند .
شکل کلی استفاده از این متد به شرح زیر است :
$ ( " selector " ).before ( content ) ;
selector : عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را قبل از آن ، در صفحه وارد نمایید .
content : تعیین کننده محتویاتی است که می خواهید قبل از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد .
مثال زیر کاربرد متد before را نشان میدهد :
$("button").click(function(){
$("p").before("<p>Hello world!</p>");
});
متد clone در jQuery
در این بخش از آموزش JQuery ، متد clone را شرح میدهیم.
متد clone برای اضافه کردن المنت های HTML در ابتدای عنصر انتخاب شده استفاده میشود.
ساختار این متد به صورت زیر است :
$(selector).clone(true|false)
مثال زیر کاربرد متد clone را نشان میدهد :
$("button").click(function(){
$("p").clone().appendTo("body");
});
متد ( ) css در jQuery
در این بخش از آموزش JQuery ، متد css را شرح میدهیم.
متد css در jQuery می تواند یک یا چند خاصیت css یک عنصر HTML موجود در صفحه را برگردانده و یا به مقدار دلخواه تغییر دهد .
متد ( ) appendTo در jQuery
در این بخش از آموزش JQuery ، متد appendTo را شرح میدهیم.
متد appendTo برای اضافه کردن المنت های HTML در ابتدای عنصر انتخاب شده استفاده میشود.
مثال زیر کاربرد متد appendTo را نشان میدهد :
$("button").click(function(){
$("<span>Hello World!</span>").appendTo("p");
});
متد ( ) attr در jQuery
در این بخش از آموزش JQuery ، متد attr را شرح میدهیم.
متد attr در jQuery ، برای 2 منظور می تواند به کار برده شود .
برای مثال فرض کنید که برای خاصیت عرض ( width ) یک عنصر عکس < img > مقدار 200px را تعیین کرده اید . این متد می تواند این مقدار را خوانده و به کاربر نمایش دهد .
برای مثال به وسیله این متد می توانید سایز فونت یک پاراگراف < p > را به مقدار 14pt تغییر دهید .
کاربرد اول - نمایش مقدار خاصیت یک عنصر
در کاربرد اول این متد می خواهیم به شما نمایش دهیم چگونه می توان مقدار خاصیت یک عنصر را استخراج کرده و سپس نمایش دهیم .
متد ( ) after در jQuery
در این بخش از آموزش JQuery ، متد after را شرح میدهیم.
به وسیله متد after در
jQuery ، می توانید محتویات مورد نظر خود ( می تواند شامل متن یا تگ های
HTML باشد ) را پس از عنصر مورد نظر خود ، در صفحه HTML وارد نمایید .
برای
مثال فرض کنید که یک پاراگراف در صفحه دارید . به وسیله این متد می توانید
یک پاراگراف یا یک تگ دیگر HTML را پس از آن عنصر ، به صفحه اضافه نمایید .
شکل کلی استفاده از این متد به شرح زیر است :
$ ( " selector " ).after ( content ) ;
selector : عنصر مورد نظری است که می خواهید محتویات مورد نظرتان را پس از آن ، در صفحه وارد نمایید .
content : تعیین کننده محتویاتی است که می خواهید پس از عنصر مورد نظر در صفحه وارد نمایید . این محتویات می تواند شامل متن یا سایر تگ های HTML باشد .
مثال زیر کاربرد متد after را نشان میدهد :
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});
متد ( ) append در jQuery
در این بخش از آموزش JQuery ، متد append را شرح میدهیم.
توسط متد append در
jQuery می توانید یک متن را به ادامه یک پاراگراف دیگر اضافه نمایید . متن
اضافه شده به ادامه پاراگراف اضافه می شود نه اینکه در سطر بعد ( برخلاف
متد ( ) after ) .
از متد append برای زمانی استفاده می شود که بخواهید یک متن را به ادامه یک پاراگراف موجود در صفحه اضافه نمایید .
شکل کلی استفاده از این متد به شرح زیر است :
Syntax $ ( " selector " ).append ( content ) ;
selector : پاراگراف یا عنصر مورد نظری است که می خواهید متن مورد نظرتان را به ادامه آن اضافه نمایید .
content : تعیین کننده محتویاتی است که می خواهید به ادامه عنصر مورد نظر در صفحه اضاافه نمایید . این محتویات می تواند شامل متن باشد .
مثال زیر کاربرد متد append را نشان میدهد :
$ ( " p#P1 " ).append ( " < b > This is what you want to add < /b > " ) ;
متد ( ) post در jQuery
در این بخش از آموزش JQuery ، متد post را شرح میدهیم.
وسیله متد post ، می توان فایلی را از سرور با استفاده از یک درخواست HTTP POST خواند .
سپس از نتیجه خروجی بر روی صفحه استفاده نمود .
شکل کلی استفاده از این متد بصورت زیر است :
$(selector).post( URL , data , function ( data , status , xhr ) , dataType ) ;
متد addclass
در این بخش از آموزش JQuery ، متد addClass را در طراحی سایت ، شرح میدهیم.
متد addClass می تواند یک کلاس css را به تگ یا تگهای مختلف تخصیص دهد.
در مثال زیر با استفاده از متد addClass کلاس important به تمام تگ های از نوع div اعمال می شود :
$("div").addClass("important");
متد ( ) load در jQuery
در این بخش از آموزش JQuery ، متد load را شرح میدهیم.
متد load
، اطلاعات مورد نظر را از سرور ( از یک فایل یا اسکریپت ) خوانده و در
عنصر مورد نظر ، بر روی صفحه قرار می دهد ( اطلاعات ان را به روز رسانی می
کند ) .
برای مثال فرض کنید که متنی را در یک فایل بر روی سرور ذخیره کرده اید ، می توانید با قرار دادن یک دکمه فرمان و تعیین تابع ( ) load
در کد آن ، کاری کنید تا در صورت کلیک کاربر بر روی دکمه فرمان ، متن
ذخیره شده در فایل ، مثلا در یک تگ div بر روی صفحه قرار داده شود .
شکل کلی استفاده از متد load بصورت زیر است :
$(selector).load ( url , data , function( response , status , xhr ) ) ;
متد ( ) ajaxSuccess در jQuery
در این بخش از آموزش JQuery ، متد ajaxSuccess را شرح میدهیم.
به وسیله متد ajaxSuccess می توان یک تابع را تعیین کرد تا در زمانی که درخواست های Ajax به سرور ، به صورت کامل و موفقیت آمیز به پایان رسید، اجرا شود .
در واقع از متد ajaxSuccess
می توان برای قرار دادن کدها و دستوراتی که می خواهید پس از پایان یافتن
موفقیت آمیز درخواست های Ajax در سرور اجرا شوند ، استفاده نمود .
شکل کلی استفاده از این متد بصورت زیر است :
$( selector ).ajaxSuccess ( function ( event , xhr , options ) ) ;
تعداد صفحات : 7
تگ لینک ( تگ Link )